<template>
<div class="index">
  <el-container>
    <el-aside>
      <el-menu :default-openeds="['1', '5']">
        <img src="@/assets/logo.png">
        <el-menu-item index="1">
          <template #title>
            <i class="el-icon-odometer"></i>
            仪表盘
          </template>
        </el-menu-item>
        <el-sub-menu index="2">
          <template #title>
            <i class="el-icon-menu"></i>
            常用设备
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1">教师管理</el-menu-item>
            <el-menu-item index="2-2">学生管理</el-menu-item>
            <el-menu-item index="2-3">公告管理</el-menu-item>
            <el-menu-item index="2-4">系统配置</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <i class="el-icon-aim"></i>
            问题
          </template>
          <el-menu-item index="3-1">问题列表</el-menu-item>
          <el-menu-item index="3-2">增加题目</el-menu-item>
          <el-menu-item index="3-3">导入导出题目</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <i class="el-icon-trophy"></i>
            比赛&练习
          </template>
          <el-menu-item index="4-1">比赛列表</el-menu-item>
          <el-menu-item index="4-2">创建比赛</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5">
          <template #title>
            <i class="el-icon-collection"></i>
            课程
          </template>
          <el-menu-item index="5-1">课程列表</el-menu-item>
          <el-menu-item index="5-2">创建课程</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
      <el-container>
        <el-header style="text-align: right; ">
          <i class="el-icon-search"></i>
          &nbsp;
          <i class="el-icon-share"></i>
          &nbsp;
          <el-dropdown :hide-on-click="false">
            <span class="el-dropdown-link">
              username<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>logout</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        </el-header>
        <el-main>
          <h1>
            标题
          </h1>
          主体内容
        </el-main>
        <el-footer>Build Version:20211009yxz</el-footer>
      </el-container>
    </el-container>
</div>
</template>
<script>
export default{
}
</script>

<style>
.el-header{
  background-color: #F9FAFC;
}
.el-footer {
  background-color: #EDECEC;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 60px;
}
.el-aside {
  background-color: #ffffff;
  color: var(--el-text-color-primary);
  text-align: left;
  line-height: 100px;
  width: 200px;
}
.el-main {
  background-color: #EDECEC;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 100%;
  height: 630px;
}
.index {
  padding: 0px;
  margin: 0px;
  height: 100%;
} 
.el-container {
  height: 100%;
}
.el-dropdown-link {
  cursor: pointer;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>